Лана : другие произведения.

Картинки для украшения раздела

Самиздат: [Регистрация] [Найти] [Рейтинги] [Обсуждения] [Новинки] [Обзоры] [Помощь|Техвопросы]
Ссылки:
Школа кожевенного мастерства: сумки, ремни своими руками
 Ваша оценка:
  • Аннотация:
    Меня нет в
    путеводителе по СИ!
    Хочу славы
    и денег!

Честно говоря, не знаю, что такое "фишки" и в чём их предназначение, но если это обычные маленькие картинки с подписями, которые служат для украшения странички, могу предложить способ замены этих "фишек" табличками.

Предположим, у вас нет никакого графического редактора, с фотошопом вы не знакомы, и картинки подписывать не умеете. А стандартные "фишки" - это слишком скучно, и вы, как говорится, "достойны большего". Тогда выбираете в сети понравившуюся картинку, например, такую: http://powerclip.ru/uploads/photos/3242.jpg. Сохраняете её себе и уменьшаете до нужных размеров.

А можете сохранением и уменьшением не заморачиваться, а задать нужный размер изображения прямо "на месте". Для этого создаёте таблицу с границей: table border="1", выравниваете по-середине: align="center". Далее приступаете к обработке ячейки. Выбираете цвет, который вам наиболее симпатичен, и заливаете им ячейку, например, чёрный : td bgcolor="#000000", задаёте требуемую ширину ячейки, например, 60 пикселей: width="60". Теперь вставляете саму картинку (её адрес) и формируете нужный размер. По ширине картинка должна быть такой же, как и ширина ячейки, то-есть 60 пикселей, а высоту height делаете как вам нужно. Пусть она будет 100 пикселей: height="100". Теперь осталось подписать картинку. Для этого в ячейке создаем блок: <div align="center"><font ...> Текст </font></div>. Внутри <font ...> задаём шрифт, нужный размер шрифта и его цвет. Стандартный размер - это size="3". Уменьшим его до "2". Цвет текста будет белым: color="#FFFFFF", а сам шрифт: face=Arial. Сформировали блок font, теперь впишем в него нужный текст. Чтобы на каждую строчку приходилось по одному слову, в конце первого слова поставим тег переноса на новую строку <br>. Осталось закрыть все теги у сформированной таблицы, и картинка в рамке готова:

 

Пример 1.

<table border="1" align="center">
<tr>
<td bgcolor="#000000" width="60">
<img src="http://powerclip.ru/uploads/photos/3242.jpg" width="60" height="100">

<div align="center">
<font size="2" color="#FFFFFF" face=Arial>
пишу<br>
фэнтези
</font>
</div>
</td>
</tr>
</table>

 

Результат:

пишу
фэнтези

Если полученный результат не удовлетворяет (большая картинка, или надпись велика) можно уменьшить размеры:

Пример 2.

<table border="1" align="center">
<tr>
<td bgcolor="#000000" width="50">
<img src="http://shkolazhizni.ru/img/content/i59/59211.jpg" width="50" height="80">

<div align="center">
<font size="1" color="#FFFFFF" face=Arial>
пишу<br>
романтику
</font>
</div>
</td>
</tr>
</table>

Красным в Примере 2 отмечены изменения, в результате которых табличка-картинка стала выглядеть так:

пишу
романтику

Можно значительно разнообразить такие таблички, используя в качестве картинок - анимированные картинки. Ищем подходящую гиф-картинку, желательно сразу маленького размера, например:

Можно, конечно, и большую картинку ужать в таблице до нужного размера, но тогда нужно тщательно соблюдать пропорции, дабы картинка не перекосилась, или же перекос не был заметен. Например, так:

Вставляем адрес этой картинки в Пример 2 и изменяем подпись и размер букв:

 

пишу
детям

Если анимированная картинка совсем маленькая, то её размеры можно не задавать. Табличка сама "обтянет" эту картинку:

Пример 3.

<table border="1" align="center" bgcolor="#999999">
<tr>
<td>
<img src="http://static.diary.ru/picture/574600.gif">

<div align="center">
<font size="2" color="#FFFF00" face=Arial>
Новичок!
</font>
</div>
</td>
</tr>
</table>

В данном примере вообще убран параметр width а таблица залита серым фоном вместе с рамкой. Для этого параметр bgcolor="#999999"вставлен прямо в блок table, а не в блок ячейки td. И в результате получаем:

 

Новичок!

 

Если же есть желание несколько отдалить текст от картинки, то нужно и перед первым словом поставить тег <br>:

Пример 4.

<table border="1" align="center" bgcolor="#FFFFFF">
<tr>
<td width="40">
<img src="http://www.kolobok.us/smiles/user/kuzya_01.gif">

<div align="center">
<font size="2" color="#000000" face=Arial>
<br> Был<br>в Топе!
</font>
</div>
</td>
</tr>
</table>

В дополнение к сказанному здесь опять задана ширина ячейки. При этом не обязательно задавать точный размер, можно задать заведомо меньший ширины картинки. Это не позволит табличке "разползтись".

 


Был
в Топе!

Ещё один способ создания таких картинок табличек - заливка ячейки фоном. В этом случае текст можно распологать по центру ячейки. А в качестве фона можно использовать любую маленькую картинку. При этом вместо параметра заливки цветом bgcolor в тег <td> или <table> надо всавить параметр заливки фоном background. И параметр <img> здесь уже не нужен:

Пример 5.

<table border="1" align="center" background="http://media.meta.ua/files/pic/0/22/85/30v0NmMlrw.jpg">
<tr>
<td width="130" height="50">

<div align="center">
<font size="3" color="#FF0000" face=Arial>
<strong>Зарисовки<br>о природе</strong>
</font>
</div>
</td>
</tr>
</table>

Результат:

Зарисовки
о природе

 

Теперь сформированные таблички-картинки можно разместить в аннотации к разделу или произведению. К сожалению, их нельзя вытянуть в строчку, как рисунки. При размещении несколькох табличек они все будут одна над другой. Но этого можно избежать, если поместить их внуть таблицы с несколькими ячейками, без фона и границ:

 

Пример 6.

<table width="350" border="0" align="center">
<tr>
<td width="20%">

<table border="1" align="center">
<tr>
<td bgcolor="#000000" width="50"><img src="http://img7-fotki.yandex.ru/get/3111/sunny-fanny.2a/0_21f5f_c6aca3b0_XS" width="50" height="80"> <div align="center"><font size="2" color="#FFFFFF" face=Arial> пишу<br>
детям</font></div></td>
</tr>
</table>
</td>
<td width="20%">

<table border="1" align="center" bgcolor="#FFFFFF">
<tr>
<td><img src="http://www.kolobok.us/smiles/user/kuzya_01.gif">
<div align="center"><font size="2" color="#000000" face=Arial> <br>Был<br>
в Топе!</font></div></td>
</tr>
</table>

</td>
<td width="20%">
<table border="1" align="center" bgcolor="#FFFFFF">
<tr>
<td><img src="http://www.kolobok.us/smiles/user/Gigakach_01.gif">
<div align="center"><font size="2" color="#000000" face=Arial><br> люблю <br>
критику</font></div></td>
</tr>
</table>
</td>
<td width="20%">

<table border="1" align="center" bgcolor="#999999">
<tr>
<td><img src="http://static.diary.ru/picture/574600.gif" align="absbottom">
<div align="center"><font size="2" color="#FFFF00" face=Arial>Новичок!</font></div></td>
</tr>
</table>
</td>
<td width="20%">
<table border="1" align="center">
<tr bgcolor="#333333">
<td width="50"><img src="http://shkolazhizni.ru/img/content/i59/59211.jpg" width="50" height="80" align="absbottom">
<div align="center"><font size="1" color="#FFFFFF" face=Arial> пишу<br>
романтику</font></div></td>
</tr>
</table>
</td>
</tr>
</table>

Здесь красным выделены отдельные таблички-картинки, которые требуется разместить. Результат:

пишу
детям

Был
в Топе!

люблю
критику
Новичок!
пишу
романтику

Эти картинки-таблички можно сделать одинаковымы по высоте, задавая в каждой ячейке парметр высоты: <td height="...">

Как это будет выглядеть, если поместить в аннотацию к разделу, можно посмотреть тут.

 


 Ваша оценка:

Связаться с программистом сайта.

Новые книги авторов СИ, вышедшие из печати:
О.Болдырева "Крадуш. Чужие души" М.Николаев "Вторжение на Землю"

Как попасть в этoт список

Кожевенное мастерство | Сайт "Художники" | Доска об'явлений "Книги"